<template>
	<div>
		<van-overlay :show="show" @click="show = false" />
		<van-nav-bar :fixed=true>
			<van-icon name="setting-o" size=22 slot="right" @click="set" />
			<van-icon name="service-o" size=22 slot="right" class="mine-service" @click="show = true" />
		</van-nav-bar>
		<div class="mine-steps">
			<van-skeleton title avatar :loading="loading" :row="0">
				<div style="text-align: left;padding: 15px;">
					<img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/522/522-bigskin-1.jpg"
					 alt="" width="60px" height="60px">
					<span style="margin-left: 15px;font-size: 12px;">普通会员</span>
				</div>
			</van-skeleton>
			<van-steps :active="active" class="mine-step">
				<van-step>普通会员</van-step>
				<van-step>魅享会员</van-step>
				<van-step>臻享会员</van-step>
				<van-step>奢享会员</van-step>
				<van-step>VIP</van-step>
			</van-steps>
			<h5>购物消费，立即升级臻享会员</h5>
		</div>
		<div class="mine-property">
			<van-row>
			  <van-col span="8" @click="coupon">
				  <h2 style="font-size: 20px;">14</h2>
				  <p>优惠券</p>
			  </van-col>
			  <van-col span="8">
				  <h2 style="font-size: 20px;">0</h2>
				  <p>关注品牌</p>
			  </van-col>
			  <van-col span="8">
				  <h2 style="font-size: 20px;">2000</h2>
				  <p>魅币</p>
			  </van-col>
			</van-row>
		</div>
		<div class="mine-links">
			<van-cell title="我的订单" is-link value="查看全部订单" title-style="text-align:left" />
			<van-row>
				<van-col span="5" @click="">
					<van-icon name="pending-payment" size="30px" />
					<p>待付款</p>
				</van-col>
				<van-col span="5">
					<van-icon name="records" size="30px" />
					<p>待发货</p>
				</van-col>
				<van-col span="5">
					<van-icon name="logistics" size="30px" />
					<p>待收货</p>
				</van-col>
				<van-col span="5">
					<van-icon name="comment-o" size="30px" />
					<p>待评价</p>
				</van-col>
				<van-col span="4">
					<van-icon name="after-sale" size="30px" />
					<p>退货/售后</p>
				</van-col>
			</van-row>
		</div>
		<div class="mine-services">
			 <van-cell title="我的服务" title-style="text-align:left;font-weight: 800;"/>
			 <van-row>
			   <van-col span="8">
				   <van-icon name="gold-coin-o" size="30px" />
				   <p>我的魅币</p>
			   </van-col>
			   <van-col span="8">
				   <van-icon name="gift-o" size="30px" />
				   <p>邀请有礼</p>
			   </van-col>
			   <van-col span="8">
				   <van-icon name="gem-o" size="30px" />
				   <p>我的特权</p>
			   </van-col>
			 </van-row>
			 <van-row>
			   <van-col span="8">
				   <van-icon name="phone-o" size="30px" />
				   <p>联系我们</p>
			   </van-col>
			   <van-col span="8">
				   <van-icon name="like-o" size="30px" />
				   <p>帮助</p>
			   </van-col>
			   
			 </van-row>
		</div>
		<div class="mine-recommend">
			<h4>R E C O M M E N D</h4>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Mine",
		data() {
			return {
				active: 1,
				loading: true,
				show: false
			}
		},
		methods: {
			set() {
				this.$router.push("/setting")
			},
			coupon(){
				this.$router.push("/coupon")
			}
		},
		mounted() {
			this.loading = false;
		}
	}
</script>

<style scoped="">
	.mine-service {
		margin-left: 10px;
	}
	
	.mine-steps,
	.mine-links,
	.mine-property,
	.mine-services{
		border: 1px solid #ccc;
		width: 336px;
		margin-left: 18px;
		border-radius: 15px;
		margin-bottom: 20px;
	}
	.mine-recommend{
		margin-bottom: 50px;
	}
	.mine-step{
		text-align: left;
	}
	p {
		font-size: 12px;
	}
</style>
